<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view class="header">
			<view v-if="!complete" style="text-align: center;">
				<image src="../../../static/loading.gif" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
			</view>
			<view class="bank_card" @click="pageToWayList" style="" v-else-if="data.wayInfo && data.wayInfo._id">
				<text>提现到：</text>
				<text style="color: black; font-weight: bold; font-size: 32rpx;margin-right: 20rpx;">{{ typeCom }}</text>
				<text class="tips">切换</text>
				<view style="margin-top: 20rpx;">{{ data.wayInfo.name }}<text v-if="data.wayInfo.account_no">（{{ data.wayInfo.account_no }}）</text></view>
			</view>
			<view v-else style="display: flex;align-items: center;padding: 0 30rpx;">
				<view @click="pageToAddWay" class="bank_card">添加提现方式</view>
				<view style="color: #ccc;"><u-icon name="arrow-right" size="28"></u-icon></view>
			</view>
			<view class="withdrawal_money">
				<view v-if="vk.getVuex('$user.userInfo.account_reward.allow') != '客官别急，获取中...'">
					<text>可提现金额：{{ vk.getVuex("$user.userInfo.account_reward.allow") | priceFilter }}</text>
					<text
						style="text-decoration: underline;color: var(--main,blue);margin-left: 40rpx;"
						@click="fullWithdrawal"
					>
						全部提现
					</text>
				</view>
				<view v-else>客官别急，获取中...</view>
			</view>
			<view class="money" style="padding: 30rpx 0rpx; margin-top: 20rpx; ">
				<text style="font-size: 44rpx; font-weight: 600; ">￥</text>
				<view style="padding: 10rpx;width: 100%;">
					<vk-data-input-keyboard-money
						placeholder="输入提现金额"
						:precision="2"
						:dot-enabled="false"
						:max="maxAllowCom"
						v-model="form1.value"
					></vk-data-input-keyboard-money>
				</view>
			</view>
			<view v-if="form1.value && data.serviceFeeK" class="service-fee-view">
				<view>扣余额：<text class="service-fee-text">{{ (Number(serviceFeeCom) + Number(withdrawalMoneyCom)).toFixed(2) }}</text></view>
				<view>服务费：<text class="service-fee-text">{{ serviceFeeCom }}</text></view>
				<view>实到账：<text class="service-fee-text">{{ withdrawalMoneyCom }}</text></view>
			</view>
			<!-- <view class="rate" style="padding: 30rpx 0rpx;">额外扣除￥12.24手续费[费率0.1%] </view> -->
			<u-button
				type="success"
				:custom-style="{
					width: '550rpx',
					margin: '15rpx auto'
				}"
				:disabled="form1.value <= 0 || !data.wayInfo._id"
				:loading="loading"
				@click="submit()"
			>
				提现
			</u-button>
		</view>

		<view class="tips-view" style="font-size: 24rpx;" v-if="data.fx.auto_withdrawal_date">
			<view>
				<text>提现服务费</text>
				<text class="tips-balance" style="margin-left: 10rpx;">{{ vk.pubfn.percentageFilter(data.fx.withdrawal_service_amount) }}</text>
				<text></text>
			</view>
			<view>
				<text>每月</text>
				<text class="tips-balance" style="margin-left: 10rpx;">{{ data.fx.auto_withdrawal_date }}</text>
				<text>号系统会自动为您发起提现。</text>
			</view>
			<view>
				<text>您也可以手动发起提现，但每次提现必须满：</text>
				<text class="tips-balance">{{ parseFloat(vk.pubfn.priceFilter(data.fx.min_withdrawal_amount)) }}</text>
				<text>元</text>
			</view>
			<view>
				<text>每月仅限手动发起提现：</text>
				<text class="tips-balance">{{ data.fx.max_withdrawal_num }}</text>
				<text>次</text>
			</view>
		</view>



		<view class="tips-view" v-if="data.credit.balance || data.credit.freight">
			<view v-if="data.credit.balance">
				<text>您有货款欠款：</text>
				<text class="tips-balance">{{ vk.pubfn.priceFilter(data.credit.balance) }}</text>
				<text>元（原价）</text>
				<text class="tips-btn" @click="vk.navigateTo('/pages/salesman-center/salesman-account/salesman-account?index=2');">去结账</text>
			</view>
			<view v-if="data.credit.freight" style="margin-top: 20rpx;">
				<text>您有运费欠款：</text>
				<text class="tips-balance">{{ vk.pubfn.priceFilter(data.credit.freight) }}</text>
				<text>元</text>
				<text class="tips-btn" @click="vk.navigateTo('/pages/salesman-center/salesman-account/salesman-account?index=2');">去结账</text>
			</view>
			<view style="margin-top: 20rpx;">
				在您提现前，需要先把欠款结账才可提现!
			</view>
		</view>

		<!-- <view class="bootom">点击此处可查看提现方式</view> -->
		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading" :delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			loading: false,
			// init请求返回的数据
			data: {
				fx:{},
				serviceFeeK: 0,
				userInfo: {
					account_reward: {
						allow: "客官别急，获取中..."
					}
				},
				wayInfo: {
					type:"",
					bank_name:"",
					bank_open:"",
					account_no:"",
					name:"",
					mobile:"",
					comment:""
				},
				credit:{
					balance:0,
					freight:0
				}
			},
			// 表单请求数据
			form1: {
				wayId: 0,
				value: ""
			},
			scrollTop: 0,
			complete:false
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init();
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {

	},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init() {
			let that = this;
			let options = that.options;
			vk.callFunction({
				url: "client/salesman.getApplyWithdrawal",
				loading: true,
				data: {},
				success: function(data) {
					that.complete = true;
					vk.pubfn.objectAssign(that.data, data);
					if (vk.pubfn.isNull(data.wayInfo)) {
						vk.confirm("请先添加提现方式", "提示", "现在添加", "点错了", function(res) {
							if (res.confirm) that.pageToAddWay();
						});
					}
				}
			});
		},
		pageToWayList() {
			let that = this;
			let url = `./way-list?mode=choose`;
			vk.navigateTo({
				url,
				events: {
					// 监听提现方式改变
					change: function(data) {
						that.data.wayInfo = data;
					}
				}
			});
		},
		pageToAddWay(){
			let that = this;
			let url = `./way-edit`;
			vk.navigateTo({
				url,
				events: {
					// 监听提现方式添加
					add: function(data) {
						that.data.wayInfo = data;
					}
				}
			});
		},
		// 提交提现申请
		submit() {
			let that = this;
			let { form1 } = that;
			let min_withdrawal_amount = that.data.fx.min_withdrawal_amount;
			if (min_withdrawal_amount > 0 && form1.value < min_withdrawal_amount) {
				vk.alert(`每次提现金额不能小于${parseFloat(vk.pubfn.priceFilter(min_withdrawal_amount))}元`);
				return false;
			}
			form1.wayId = that.data.wayInfo._id;
			vk.callFunction({
				url: "client/salesman.applyWithdrawal",
				loading: true,
				data: form1,
				success: function(data) {
					// 订阅消息
					vk.pubfn.requestSubscribeMessage({
						tmplIds: data.tmplIds
					});
					vk.alert(data.msg, "提示", "好的", ()=>{
						vk.redirectTo('./apply-record');
					});
					that.form1.value = "";
				}
			});
		},
		fullWithdrawal(){
			let allow = vk.getVuex('$user.userInfo.account_reward.allow');
			if (allow > 0) {
				this.form1.value = allow;
			}
		}
	},
	// 计算属性
	computed: {
		withdrawalMoneyCom() {
			let that = this;
			let allow = vk.getVuex("$user.userInfo.account_reward.allow");
			let { form1 } = that;
			let { value = 0 } = form1;
			let service_fee = Math.ceil(value * that.data.serviceFeeK);
			let withdrawal_money; // 实际到账金额

			if (allow >= service_fee + value) {
				// 如果可提现余额 >= 服务费 + 当前提现金额,则 扣除 当前提现金额 + 服务费 的余额
				withdrawal_money = value;
				value = parseInt(value + service_fee);
			} else {
				// 如果可提现余额 < 服务费 + 当前提现金额,则 扣除 当前提现金额
				withdrawal_money = parseInt(value - service_fee);
			}
			return vk.pubfn.priceFilter(withdrawal_money);
		},
		serviceFeeCom() {
			let that = this;
			return vk.pubfn.priceFilter(Math.ceil(that.form1.value * that.data.serviceFeeK));
		},
		typeCom(){
			let arr = ["","支付宝","微信","银行卡"];
			let type = this.data.wayInfo.type;
			return arr[type];
		},
		maxAllowCom(){
			let allow = vk.getVuex("$user.userInfo.account_reward.allow");
			allow = vk.pubfn.toDecimal(allow / 100, 2);
			if (allow < 0) allow = 0;
			return allow;
		}
	}
};
</script>
<style lang="scss" scoped>
.app {
	padding: 40rpx 30rpx;
	height: 100vh;
	width: 100%;
	background-color: #ededed;
}

.header {
	padding: 40rpx 0rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}

.bank_card {
	margin: auto;
	width: 550rpx;

	.tips {
		&:first-of-type {
			grid-row-start: span 2;
			font-weight: bolder;
			font-size: 32rpx;
			letter-spacing: 2rpx;
		}

		&:nth-of-type(2) {
			font-size: 30rpx;
			color: #63759b;
		}

		&:last-of-type {
			margin-top: 10rpx;
			color: #c0c0c0;
			font-size: 24rpx;
		}
	}
}

// 提现金额
.withdrawal_money {
	margin: 60rpx auto 0rpx;
	width: 550rpx;
	font-size: 34rpx;
}

// 金额
.money {
	margin: auto;
	width: 550rpx;
	padding-right: 40rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f2f5;
	display: flex;

	text {
		font-size: 70rpx;
		margin-right: 15rpx;
	}

	input {
		align-self: flex-end;
	}
}

// 费率
.rate {
	width: 550rpx;
	margin: auto;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #c0c0c0;
}

// 当有值输入时改变背景颜色
.withdrawal_bg {
	background-color: #19be6b !important;
	color: #ffffff !important;
}

// 底部按钮(添加提现方式)
.bootom {
	margin: 300rpx auto 0rpx;
	text-align: center;
	color: #c0c0c0;
	letter-spacing: 4rpx;
}

.tips-view {
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-top: 40rpx;
	.tips-balance {
		color: red;
		margin-right: 10rpx;
	}
	.tips-btn {
		margin-left: 10rpx;
		color: blue;
		text-decoration: underline;
	}
}

.service-fee-view{
	width: 100%;
	text-align: right;
	padding-right: 80rpx;
	font-size: 12px;
	margin-top: 6rpx;
	.service-fee-text{
		min-width: 80rpx;
		display: inline-block;
	}
}
</style>
